Designing for Accessibility
by means of Two-Factor-Authentication
Summary
This user flow for a two-factor-authentication is trying to provide the best possible accessibility. A two-factor-authentication is an extra layer of protection used to ensure the security of online accounts, in my example I was thinking about a bank account.
By providing the best possible accessibility, UX designers are ensuring that all of the potential users, including people with disabilities, have a decent user experience and are able to easily access the information. By implementing accessibility best practices, we are also improving the usability of the site for all users including
blind or color blind ones; people with low vision or who are deaf; people with mobility impairments or cognitive disabilities.
To give everybody a great user experience WCAG guidelines suggest to build the content perceivable, operable, understandable and robust.
My Work
As a UX Designer I was working on the user flow of the two-factor-authentication while finding the most accessible solutions for:
instructions, labelling of fields, colors and contrast, error messaging and focus order for screen readers.
I started with setting up the basic user flow, then refined the user flow while checking on contrast and thinking about focus order. Additionally I made a moodboard because I wanted to support the user flow with an appealing color concept and look-and-feel. I specified the originated colors and typography and finally created screens for various devices as for ultimate accessibility a site needs to run with same quality on different sized screens.
Screen Design
Defining the three essential steps
First, the user has to submit his phone number for receiving a one time password. After the password has been sent to his phone, he has to enter it. That procedure ensures his identity as his phone number is linked with his profile. Finally he can set up a new PIN Code.
Moodboard
The appearance of the banking service should be trustfull and calming as I am hypothetically adressing a more mature (no fancy online bank for youngsters) as well as business clientel that wants to feel secure and taken care of while operating with money.
First Attempts
I combined the rough sketch of the screens with the look-and-feel of my moodboard. In the next screens I am still experimenting with which font to choose for the name of the bank. I was not satisfied with the visual representation of the steps and progress bar as blind people will not see this. So I decided to label the process additionaly.
Color Contrast
Visually and also verbally I went for a even more clear starting page and indication of steps and progress. The turquoise color was replaced by a brighter version for optimal contrast.
It turned out that for color blind people the dark green font on turquoise is not the best to read. In the picture below is a textbox that shows what the text for color blind people (in black and white) would look like. As I use this combination on the buttons, they are not as easy as could be to read for them.
The results of the color contrast checker showed following: Red on grey is well readable as long as the font is bigger than 16 pt (which it is; I have no fonts smaller than 16 pt). Dark green text on cyan is not fully color compliant: brightness and color difference leave room for optimization.
Even in most cases "AA" is enough, I was aiming for "AAA".
Clear Instructions and Status Feedback
Entering phone number is visually and verbally clear. Other steps to come are shown in a transparent mode.
Input Fields: Labelling and Focus States
Input fields are clearly labelled and the label still is present while writing.
When having selected an input field, it is active and "is in focus"; the input label has a shiny turquoise stroke.
Both methods help to keep the cognitive load minimal.
For giving clear guidance I decided to enable the submit button unless there is not a full phone number entered. When entered, focus of the input field is gone and the submit button is fully present. So the perception of necessary information is enhanced.
Error Support
Entering the received password.
What could go wrong? Submitted wrong phone number: So the phone number the password has been sent to is stated. The user can check, if he submitted the right one. If not, he can go back to step 1 and enter his number again.
What could go wrong? Did not get a password for unknown reason: In this case the user can go back to step 1 and request a new one.
What could go wrong?
The one time password could time out when the user takes too much time to enter it.
NOT using Color Alone to make Critical Information understandable!
What could go wrong? The user is entering a wrong password. For people who can not see the color red that well, it is important that there is also a sign indicating where something is wrong as the red color will not attract their attention!
Entering the PIN Code: There is a note that exactly says, what format of PIN Code is required. There is the possibility to show the PIN Code. Normally it is hidden, so people around cannot see it.
Easy identifiable Feedback
What could go wrong?
The user is entering a letter or another sign instead of the required numbers.
Finally Done!
Keyboard Accessibility
Keyboard accessibility is crucial for people with motor disabilities and blind people that rely on screen readers.
For people using screenreaders it is important to define the way a screenreader is accessing the content: Typically the order of a visual layout flows from left to right and top to down. Considering how elements are grouped and the order of how they receive focus is essential for providing intuitive interaction possibilities.
(Best practice for screen readers: Providing the right <alt> text for images. Supporting navigation by "skip to main content"-link and by providing proper heading and/or structural elements.
Screen readers navigate web pages by heading structure. Assigning true headings is imporant; not just making headings big and bold. Blind users can listen to the list of headings, jump the content by types of headings or navigate directly to top-level headings <h1>.)
Order of screen readers accessing this content:
Color and Typeface
The color palette evokes trust. Bottle-green is serene and calming while the bright turquoise is uplifting and reassuring at the same time. Turquoise is a friendly and happy color, radiating the tranquility of blue, the growth of green, and the energy of yellow. Turquoise can help clear thinking.
The interface has a monochromatic look with highlighted elements in accent color (turquoise), e.g. buttons.
Work Sans is reserved for headers and button text. The fonts closer to the extreme weights are designed more for use on the web. Overall, features are simplified and optimised for screen resolutions; for example, diacritic marks are larger than how they would be in print.
Verdana is reserved for the body text. Some of the features of Verdana include large x-heights, wider typeface, wider spacing and bigger counters — spaces inside partially closed letters (c, s). All of these elements work together to make this font readable even at extremely small sizes.
Responsive Design
I want to provide optimal viewing across a wide range of devices, so I was aiming to make my design fluidly adaptable. As I already started designing for a medium to bigger sized device with 12 columns, I followed the best practice and designed the layout grid with eight columns for the medium device and the four-columns-layout for the small one. I aimed for a fluid layout in certain break point ranges and used the responsive layout grid guidelines of material design for my reference.
